<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/safe/css.css"/>
    <link rel="stylesheet" href="css/safe/common.min.css"/>
    <link rel="stylesheet" href="css/safe/ms-style.min.css"/>
    <link rel="stylesheet" href="css/safe/personal_member.min.css"/>
    <link rel="stylesheet" href="css/safe/Snaddress.min.css"/>
    <style>
        body {
            background: #f5f5f5;
        }

        .sui-table th {
            padding: 16px 8px;
            line-height: 18px;
            text-align: center;
            vertical-align: middle;
            border-top: 1px solid #e6e6e6;
            font-weight: normal;
            font-size: 14px;
            color: #333333;
        }

        .sui-table td {
            padding: 16px 8px;
            line-height: 18px;
            text-align: center;
            vertical-align: middle;
            border-top: 1px solid #e6e6e6;
            font-weight: normal;
            font-size: 12px;
            color: #333333;
        }

        img {
            max-width: 100%;
            height: auto;
            /*vertical-align: bottom;*/
            border: 0;
            -ms-interpolation-mode: bicubic;
            margin-left: -10px;
        }

        a {
            color: white;
            text-decoration: none;
        }

        a:hover {
            color: #ff8b46;
            text-decoration: none;
        }

        dd {
            font-size: 16px;
            color: white;
        }

        .order_table {
            width: 130px;
            height: 40px;
            font-size: 16px;
        }

        .order_td {
            font-size: 15px;
            height: 50px;
            color: #000;
        }

        .btn {
            width: 60px;
            height: 28px;
            border: 1px solid black;
            margin-top: -30px;
        }

        .btn:hover {
            color: white;
            background: #95c6ff;
            cursor: pointer;
        }
    </style>
</head>
<body class="ms-body">

<jsp:include page="user_center_header.jsp"></jsp:include>

<div id="ms-center" class="personal-member">
    <div class="cont">

        <jsp:include page="left_menu.jsp"></jsp:include>

        <div class="cont-main">
            <div class="main-wrap mt15" style="border: 0px;">
                <div class="server-wrapper">
                    <div class="server-tab" style="margin-top: 26px;">
                        <h3>
                            <span style="height: 20px; width: 2px;background: orangered;float: left;top: 10px;position: absolute;"></span>
                            <strong style="margin-left: 10px;font-size: 20px;">旅游订单</strong>
                        </h3>
                        <div style="vertical-align: bottom;text-align: center;">
                            <div style="display: table;width: 1060px;padding: 10px;float: left;background-color: #fff;height: 250px;border: 1px solid #d1d3d9;">

                                <div style="display: table-cell;">
                                    <div style="position: absolute;margin-top: 10px;font-size: 14px;color: #0e0e0e;float: left;background: #e0dce1;">
                                        <a href="javascript:;" id="all_order">
                                            <span style="margin-left: 10px;font-size: 25px;font-weight: bolder;">全部订单</span>
                                        </a>
                                        <span style="margin-left: 35px;margin-right: 35px;font-size: 25px;">|</span>
                                        <a href="javascript:;" id="pay">
                                            <span style="font-size: 25px;font-weight: bolder;">待付款</span>
                                            <font style="color: #6e91cf;font-size: 23px;font-weight: bolder;"
                                                  id="pay_font">0</font>
                                        </a>
                                        <span style="margin-left: 35px;margin-right: 35px;font-size: 25px;">|</span>
                                        <a href="javascript:;" id="trip">
                                            <span style="font-size: 25px;font-weight: bolder;">待出行</span>
                                            <font style="color: #6e91cf;font-size: 23px;font-weight: bolder;"
                                                  id="trip_font">0</font>
                                        </a>
                                        <span style="margin-left: 35px;margin-right: 35px;font-size: 25px;">|</span>
                                        <a href="javascript:;" id="comment">
                                            <span style="font-size: 25px;font-weight: bolder;">待点评</span>
                                            <font style="color: #6e91cf;font-size: 23px;font-weight: bolder;"
                                                  id="comment_font">0</font>
                                        </a>
                                        <span style="margin-left: 35px;margin-right: 35px;font-size: 25px;">|</span>
                                        <a href="javascript:;" id="cancel">
                                            <span style="font-size: 25px;font-weight: bolder;">已取消</span>
                                            <font style="color: #6e91cf;font-size: 23px;font-weight: bolder;"
                                                  id="cancel_font">0</font>
                                        </a>
                                        <span style="margin-left: 35px;margin-right: 35px;font-size: 25px;">|</span>


                                    </div>
                                    <div style="border-top:1px #ccc solid;width: 1050px;margin-top: 50px;float: left;"></div>

                                    <table id="order_table">
                                        <tr style="background: #d1e5ea;">
                                            <th width="350px" style="font-size: 16px;">景点名称</th>
                                            <th class="order_table">数量</th>
                                            <th class="order_table" style="width: 190px;">下单时间</th>
                                            <th class="order_table">订单金额</th>
                                            <th class="order_table">状态</th>
                                            <th class="order_table" style="width: 160px;">操作</th>
                                        </tr>
                                        <tr>
                                            <td colspan="6">
                                                <hr>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="order_td">&lt;长隆飞鸟乐园活力开园青少年或学生平日门票&gt;</td>
                                            <td class="order_td">6</td>
                                            <td class="order_td">2020-05-19 13:04:56</td>
                                            <td class="order_td" style="color: red;">￥159.00</td>
                                            <td class="order_td">待付款</td>
                                            <td>
                                                <button class="btn">订单详情</button>
                                                <button class="btn">删除</button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ng-footer ">
			<textarea class="footer-dom " id="footer-dom-02 ">
			</textarea>
        <div class="ng-fix-bar "></div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/user_center/center.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/getDateStr.js"></script>
<script>
    var prePay = 0;
    var preTrip = 0;
    var preComment = 0;
    var preCancel = 0;

    $(function () {
        // 页面加载后查询所有订单
        queryAllOrder();
    });

    // 查询所有的订单
    function queryAllOrder() {
        // 发送请求请求 sight/findSightBySightId
        $.post("order/queryAllByUserId", {}, function (orders) {
            showOrder(orders);
            // 显示各类型订单数量
            showOrderTypeNum(orders);
        });
    }

    // 全部订单
    $("#all_order").click(function () {
        queryAllOrder();
    });
    // 待付款
    $("#pay").click(function () {
        // 发送请求请求 sight/findSightBySightId
        $.post("order/queryByUserIdAndStatus", {orderStatus: 1}, function (orders) {

            showOrder(orders);
        });
    });
    // 待出行
    $("#trip").click(function () {
        // 发送请求请求 sight/findSightBySightId
        $.post("order/queryByUserIdAndStatus", {orderStatus: 2}, function (orders) {
            showOrder(orders);
        });
    });
    // 待评论
    $("#comment").click(function () {
        // 发送请求请求 sight/findSightBySightId
        $.post("order/queryByUserIdAndStatus", {orderStatus: 3}, function (orders) {

            showOrder(orders);
        });
    });
    // 已取消
    $("#cancel").click(function () {
        // 发送请求请求 sight/findSightBySightId
        $.post("order/queryByUserIdAndStatus", {orderStatus: 0}, function (orders) {
            showOrder(orders);
        });
    });

    // 显示各类型订单数量
    function showOrderTypeNum(orders) {
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            var detailType = order.ticketTypeDetail;
            var orderStatus = "";

            if (order.orderStatus == 0) {
                orderStatus = "已取消";
                preCancel++;
            } else if (order.orderStatus == 1) {
                orderStatus = "待付款";
                prePay++;
            } else if (order.orderStatus == 2) {
                orderStatus = "待出行";
                preTrip++;
            } else if (order.orderStatus == 3) {
                orderStatus = "待点评";
                preComment++;
            }

            $("#pay_font").html("(" + prePay + ")");
            $("#trip_font").html("(" + preTrip + ")");
            $("#comment_font").html("(" + preComment + ")");
            $("#cancel_font").html("(" + preCancel + ")");
        }
    }

    // 显示订单
    function showOrder(orders) {

        var title = '<tr style="background: #d1e5ea;">\n' +
            '                                        <th width="350px" style="font-size: 16px;">门票名称</th>\n' +
            '                                        <th class="order_table">数量</th>\n' +
            '                                        <th class="order_table" style="width: 190px;">下单时间</th>\n' +
            '                                        <th class="order_table">订单金额</th>\n' +
            '                                        <th class="order_table">状态</th>\n' +
            '                                        <th class="order_table" style="width: 160px;">操作</th>\n' +
            '                                </tr>\n';

        var table = "";
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            var detailType = order.ticketTypeDetail;
            var dateStr = getDateStr(order.createTime);

            var orderStatus = ""; // 订单状态显示
            var operate = ""; // 具体执行的操作

            if (order.orderStatus == 0) {
                orderStatus = "已取消";
                operate = "删除";
            } else if (order.orderStatus == 1) {
                orderStatus = "待付款";
                operate = "去支付";
            } else if (order.orderStatus == 2) {
                orderStatus = "待出行";
                operate = "退款";
            } else if (order.orderStatus == 3) {
                orderStatus = "待点评";
                operate = "去点评";
            } else if (order.orderStatus == 4) {
                orderStatus = "已退款";
                operate = "删除";
            }

            table += '<tr><td colspan="6"><hr></td></tr><tr>\n' +
                '                                        <td class="order_td">&lt;' + detailType.detailTypeName + '&gt;</td>\n' +
                '                                        <td class="order_td">' + order.orderNum + '</td>\n' +
                '                                        <td class="order_td">' + dateStr + '</td>\n' +
                '                                        <td class="order_td" style="color: red;">￥' + order.payAmount + '</td>\n' +
                '                                        <td class="order_td">' + orderStatus + '</td>\n' +
                '                                        <td>\n' +
                '                                            <button class="btn" value="' + order.orderId + '" onclick="orderDetail(this);">订单详情</button>\n' +
                '                                            <button class="btn" value="' + order.orderId + '" onclick="operate(this);">' + operate + '</button>\n' +
                '                                        </td>\n' +
                '                                    </tr>';

        }
        $("#order_table").html(title + table);
    }

    // 订单详情按钮
    function orderDetail(ele) {
        var ele_val = $(ele).val();
        //页面层
        layer.open({
            type: 2,
            skin: 'layui-layer-rim', //加上边框
            area: ['60%','720px'], //宽高
            resize: true,
            shadeClose: true,
            /* yes：有滚动条  no：无滚动条 */
            content: ['pages/user_center/order_detail.jsp?orderId=' + ele_val, 'yes']
        });
    }

    function operate(ele) {
        var ele_text = $(ele).text();
        var ele_val = $(ele).val();

        // 判断需要执行的操作
        if (ele_text == "删除") {
            layer.confirm('确定删除？',

                {
                    btn: ['确定', '取消'] //按钮
                },

                function (index) {
                    // 发送请求请求
                    $.post("order/deleteOrder", {orderId: ele_val}, function (data) {

                        if (data.flag) {
                            layer.msg('删除成功！', {icon: 1});
                            // 刷新
                            location.reload();
                        } else {
                            layer.msg(data.errorMsg, {icon: 1});
                        }
                    });

                    return true;
                },
                function (index) {
                    layer.msg('已取消！', {icon: 1});
                    return true;
                }
            );

        } else if (ele_text == "去支付") {
            // 发送请求请求
            $.post("pay/payAgain", {orderId: ele_val}, function (data) {
                $("body").html(data);
            });
        } else if (ele_text == "退款") {
            layer.confirm('确定退款？',

                {
                    btn: ['确定', '取消'] //按钮
                },

                function (index) {
                    // 发送请求请求
                    $.post("pay/refund", {orderId: ele_val}, function (data) {
                        $("body").html(data);
                    });

                    return true;
                },
                function (index) {
                    layer.msg('已取消！', {icon: 1});
                    return true;
                }
            );

        } else if (ele_text == "去点评") {
            window.open("user_center/comment.jsp?detailTypeId=" + ele_val);
        }
    }

</script>

</body>
</html>